<!-- 大华播放器 -->

<template>
  <div ref="player" :class="className">
    <MyPlayer
      v-if="loaded"
      :videoId="id"
      :windowType="replay ? 3 : 0"
      ref="dhplayer"
      :cover-shield-class="['ant-layout-content']"
      :shieldClass="['test_drop', 'streamTypeClass', 'datePickerClass', 'recordSourceClass']"
      :division="1"
      :request="ajaxRequest"
      @createError="createError"
    />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import H5Player from '../H5Player'
import UTIL from './UTIL'
import props from './props'

let DAHUA_CONFIG // 大华配置

// ============================== 导出组件 ============================== //

export default CORE.extend(H5Player, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DhPlayer',

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: {
    ...H5Player.props,
    ...props,
  },

  /**
   * 状态数据
   */
  data() {
    return {
      ...H5Player.data.call(this),

      snum: 0, // 当前视频
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...H5Player.computed,

    /**
     * 接口配置
     */
    ajaxRequest() {
      return this.replay ? UTIL.REPLAY_API : UTIL.PLAY_API
    },

    /**
     * 开始方法
     */
    startMethod() {
      return this.replay ? 'startPlayback' : 'startReal'
    },

    /**
     * 开始参数
     */
    startParam() {
      const { replay, value: channelId, snum } = this
      if (replay) {
        return [{
          channelId, // 频道 ID 示例如 '1000064$1$0$0'
          name: '', // 通道名称
          startTime: CORE.timeStr(CORE.today()), // 今天 00:00:00
          endTime: CORE.timeStr(CORE.today(1), -1), // 今天 23:59:59
          recordSource: 2, // 1-全部 2-设备录像 3-中心录像
          streamType: 1, //  1-主码流  2-辅码流
          snum, // 播放窗口
        }]
      } else {
        return [{
          channelId, // 频道 ID 示例如 '1000064$1$0$0'
          cameraType: '1', // 摄像头类型（用于云台控制）
          capability: undefined, // 能力集（用于云台控制）
          deviceType: 2, // 设备类型（用于对讲）
          streamType: 1, // 选择主码流或者辅码流
          snum,
        }]
      }
    },

    /**
     * 停止参数
     */
    stopParam() {
      const { snum } = this
      return snum
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...H5Player.methods,

    /**
     * 加载
     */
    async load() {
      await CORE.loadJS(CORE.common('js/dhplayer/VideoPlayer.js'), '大华播放器')

      if (!DAHUA_CONFIG) {
        DAHUA_CONFIG = await CORE.loadJSON(CORE.asset('DAHUA_CONFIG.json'))
      }

      this.loaded = true

      await UTIL.loginServer(DAHUA_CONFIG)
    },

    /**
     * 开始
     */
    start() {
      const { $refs: { dhplayer }, startMethod, startParam } = this
      dhplayer && dhplayer[startMethod](startParam)
    },

    /**
     * 停止
     */
    stop() {
      const { $refs: { dhplayer }, stopParam } = this
      dhplayer && dhplayer.closeVideo(stopParam)
    },

    /**
     * 创建失败
     */
    createError({ code }) {
      if (code === 1001) this.$refs.player.innerHTML = UTIL.LINK // 设置提示
    },
  },
})
</script>
